<template>
  <div class="main-containe">
    <a-layout-header class="diy-header ">
      <div class="diy-header-back" @click="handleGoBack">
        <Icon icon="ant-design:left-outlined" :size="14" />
        <span style="margin-left: 5px;">返回</span>
      </div>

    </a-layout-header>

    <a-layout-content class="diy-content full-container">
      <div class="diy-main-content">
        <!-- 组件列表区域 -->
        <div class="diy-component full-container diy-padding-10">
          <a-collapse ghost>
            <a-collapse-panel key="1" header="基础组件">
              <p>123123123</p>
            </a-collapse-panel>
            <a-collapse-panel key="2" header="扩展组件">
              <p>123123123</p>
            </a-collapse-panel>
          </a-collapse>
        </div>

        <div class="diy-main-page full-container diy-padding-10">
          <div class="help-tool-content">
            <ul class="diy-quick-action">
              <Tooltip title="上移" placement="rightTop">
                <div class="diy-quick-action-icon">
                  <Icon icon="ant-design:up-outlined" color="#000000" :size="22" />
                </div>
              </Tooltip>
              <Tooltip title="下移" placement="rightTop">
                <div class="diy-quick-action-icon">
                  <Icon icon="ant-design:down-outlined" color="#000000" :size="22" />
                </div>
              </Tooltip>

              <Tooltip title="拷贝" placement="rightTop">
                <div class="diy-quick-action-icon">
                  <Icon icon="ant-design:copy-outlined" color="#000000" :size="22" />
                </div>
              </Tooltip>

              <Tooltip title="删除" placement="rightTop">
                <div class="diy-quick-action-icon">
                  <Icon icon="ant-design:delete-twotone" color="#000000" :size="22" />
                </div>
              </Tooltip>

              <Tooltip title="重置" placement="rightTop">
                <div class="diy-quick-action-icon">
                  <Icon icon="ant-design:reload-outlined" color="#000000" :size="22" />
                </div>
              </Tooltip>

            </ul>

            <!-- 页面展示区域 -->
            <div class="help-tool-content-page">
              <div style="height: 2000px; color: red;">
                Sider
              </div>
            </div>
          </div>
        </div>

        <!-- 编辑组件属性区域 -->
        <div class="diy-tool full-container diy-padding-10">
          <div style="height: 2000px; color: gold;">
            Sider
          </div>
        </div>
      </div>
    </a-layout-content>

  </div>
</template>

<script lang="ts" name="diy" setup>
import {ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {Icon} from '/@/components/Icon';
import {Tooltip} from 'ant-design-vue';

const route = useRoute();
const router = useRouter()

route.query.name = route.query.name || '';
// 页面模板，新页面传入
route.query.type = route.query.type || '';
// 页面模板名称，新页面传入
route.query.template = route.query.template || '';
route.query.title = route.query.title || '';


const getBackUrlFromWindow = () => {
  try {
    return window.opener['backUrl']
  } catch (e) {
    return undefined
  }
}

const backUrl = getBackUrlFromWindow() || route.query.backUrl || '/welcome/user';
// 数据是否发生变化，false：没变化，true：变化了
const isChange = ref(true);


const handleGoBack = () => {
  if (isChange.value) {
    router.push(backUrl);
  } else {
    // // 数据发生变化，弹框提示：确定离开此页面
    // ElMessageBox.confirm(
    //   t('leavePageTitleTips'),
    //   t('leavePageContentTips'),
    //   {
    //     confirmButtonText: t('confirm'),
    //     cancelButtonText: t('cancel'),
    //     type: 'warning',
    //     autofocus: false
    //   }
    // ).then(() => {
    //   router.push(backPath);
    // }).catch(() => {
    // })
  }
}
</script>

<style lang="less">
@import './diy.less';

.diy-header {
  color: #fff;
  height: 64;
  line-height: 64px;
  background-color: #7dbcea;
}

.diy-sider {
  color: #303133;
  overflow: auto;
  display: inline-block;
  padding: 10px;
  background-color: #ffffff;
}

.diy-content {
  // margin: 10px;
  color: #fff;
  // display: flex;
  position: relative;
  // justify-content: center;
  // background-color: gold;
}

.diy-main-content {
  display: flex;
  overflow-y: auto;
}

.diy-component {
  // background: yellow;
  background-color: #ffffff;
  width: 350px;
  min-width: 350px;
  overflow: auto;
}

.diy-main-page {
  flex: 1;
  position: relative;
  // background: #00FFFF;
  background-color: #f4f4f4;
  min-width: 570px;
  display: flex;
  justify-content: center;
}

.diy-tool {
  width: 400px;
  min-width: 400px;
  // background: red;
  background-color: #ffffff;
  overflow: auto;
}

.diy-padding-10 {
  padding: 10px;
}
</style>
